<template>
<div id="yin">
 <div id="demo">  
    <!-- 遮罩层 -->  
     <div class="container" v-show="panel"> 
       <div class="bigcat4">
       <div class="bigcat"> 
          <div class="rainbow">修改头像</div>
       </div>
       <div class="bigcat1"></div>
  <div class="bigcat5">
        <img id="image" :src="url" alt="Picture">
        <div class="rainbow1">
        <el-tag type="warning">选择你需要剪辑的区域作为头像</el-tag>
        </div>
  </div>
  
        <div class="bigcat2"> 
          <div class="bigcat6">
              <el-button type="warning" round @click="crop" >确认</el-button>
        </div>
        </div>
    </div> 
     </div>



    <div style="padding:60px;">  
        <div class="show"> 
          <div class="picture" :style="'backgroundImage:url('+user.imgUrl+')'">  
          </div>  
        </div>
        <div style="margin-top:108px;margin-left:100px"> 
          <a href="javascript:;" class="a-upload" style="text-align:center;"> 
          <input type="file" id="change" accept="image" @change="change"><div class="eva">上传图片</div>
          </a>

          <label for="change"></label>  
        </div>  
    </div>  
  </div>  
</div>
</template>
<script>
import $ from 'jquery'
import Cropper from 'cropperjs'  
import {mapState,mapActions} from 'vuex'

export default {  
  computed:{
    ...mapState({
      'user': (state) => state.user
    }),
    ...mapActions([
      'editUserImgUrl'
    ])
  }, 
  data () {  
    return {  
      dialogVisible: false ,
      headerImage:'',  
      picValue:'',  
      cropper:'',  
      croppable:false,  
      panel:false,  
      url:''  
    }  
  },  
  mounted () {  
    //初始化这个裁剪框  
    var self = this;  
    var image = document.getElementById('image');  
    this.cropper = new Cropper(image, {  
      aspectRatio: 1,  
      viewMode: 1,  
      background:false,  
      zoomable:false,  
      ready: function () {  
        self.croppable = true;  
      }  
    });  
  },  
  methods: {  

      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

    getObjectURL (file) {  
      var url = null ;   
      if (window.createObjectURL!=undefined) { // basic  
        url = window.createObjectURL(file) ;  
      } else if (window.URL!=undefined) { // mozilla(firefox)  
        url = window.URL.createObjectURL(file) ;  
      } else if (window.webkitURL!=undefined) { // webkit or chrome  
        url = window.webkitURL.createObjectURL(file) ;  
      }  
      return url ;  
    },  
    change (e) {  
      let files = e.target.files || e.dataTransfer.files;  
      if (!files.length) return;  
      this.panel = true;  
      this.picValue = files[0];  
      this.url = this.getObjectURL(this.picValue);  
      //每次替换图片要重新得到新的url  
      if(this.cropper){  
        this.cropper.replace(this.url);  
      }  
      this.panel = true;  

    },  
    crop () {  
        this.panel = false;  
        var croppedCanvas;  
        var roundedCanvas;  

        if (!this.croppable) {  
          return;  
        }  
        // Crop  
        croppedCanvas = this.cropper.getCroppedCanvas();  
        
        // Round  
        roundedCanvas = this.getRoundedCanvas(croppedCanvas);  

        this.headerImage = roundedCanvas.toDataURL();  
        this.$store.commit('setUserImg',this.headerImage)
        this.postImg()  
// console.log(this.headerImage)  
    },  
    getRoundedCanvas (sourceCanvas) {  

      var canvas = document.createElement('canvas');  
      var context = canvas.getContext('2d');  
      var width = sourceCanvas.width;  
      var height = sourceCanvas.height;  

      canvas.width = width;  
      canvas.height = height;  

      context.imageSmoothingEnabled = true;  
      context.drawImage(sourceCanvas, 0, 0, width, height);  
      context.globalCompositeOperation = 'destination-in';  
      context.beginPath();  
      context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);  
      context.fill();  

      return canvas;  
    },  
    postImg () {  
        var imgUrl = ''
              $.ajax({
                    type: 'post',
                    url: 'http://210.41.45.4/jxfl/upload/uploadBase64',
                    dataType: 'json',
                    async: false,
                    data: {
                        base64: this.user.imgUrl,
                        number: '000000'
                    },
                    success: function (res) {
                        console.log(res)
                        // this.$store.dispatch('editUserImgUrl',res.data)
                        // this.editUserImgUrl(res.data)
                        imgUrl = res.data
                    },
                    error:function(timeout,error,notmodified){
                        console.log(error)
                    }
                });  
        console.log(imgUrl)
        this.$store.dispatch('editUserImgUrl',{'imgUrl':imgUrl})

    }  
  }
}  
</script>

<style lang="less">

.eva{
  height: 30px;
  margin-top: 4px;
  color: #fff;
}


/*a  upload */
.a-upload {
    padding: 4px 10px;
    height: 30px;
    width: 85px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #e6a23c;
    background: #e6a23c;
    border: 1px solid #e6a23c;
    border-radius: 40px;
    
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #e6a23cd5;
    border-color: #ccc;
    text-decoration: none
}



 *{  
  margin: 0;  
  padding: 0; 
}  


.rainbow1{
  text-align: center;
  margin-top: 30px;
}

.rainbow{
  margin-top:5px
}

.bigcat6{
  height: 80px;
  margin-top:4px; 
}

.bigcat5{
  margin-top: 10px;
  margin-left: 70px;
  width: 400px;
  height: 350px;
}

.bigcat2{
text-align: center;
  margin-top:100px;
  height: 30px;
  border-top-style: solid;
  border-top-color: rgb(253, 155, 8);
  border-top-width: 1px;

}

.bigcat1{
  height: 9px;
}

.bigcat{
  text-align: center;
  height: 30px;
  background: #eee;
  border-style: solid;
  border-color:rgb(231, 231, 231);
  border-width: 1px;
}


.bigcat4{
  width: 550px;
  height: 550px;
  border-style: solid;
    border-width: 1px;
    border-color: #eee;
    background:rgb(255, 255, 255);  
}

.exo{
  position: absolute;
  text-align: center;
}

#demo #button {  
  position: absolute;  
  right: 10px;  
  top: 10px;  
  width: 80px;  
  height: 40px;  
  border:none;  
  border-radius: 5px;  
  background:white;  
}  
#demo .show {  
  width: 300px;  
  height: 300px;  
  overflow: hidden;  
  position: relative;  
  border-radius: 50%;  
  border: 1px solid #d5d5d5;  
}  
#demo .picture {  
  width: 100%;  
  height: 100%;  
  overflow: hidden;  
  background-position: center center;  
  background-repeat: no-repeat;  
  background-size: cover;   
}  
#demo .container {  
    z-index: 99;  
    position: fixed;  
    padding-top: 0px;  
    left:800px;  
    top: 10%;  
    right: 0;  
    bottom: 0; 
}
#demo #image {  
  max-width: 100%;  
}
.cropper-view-box,.cropper-face {  
  border-radius: 50%;  
}  
/*!  
 * Cropper.js v1.0.0-rc  
 * https://github.com/fengyuanchen/cropperjs  
 *  
 * Copyright (c) 2017 Fengyuan Chen  
 * Released under the MIT license  
 *  
 * Date: 2017-03-25T12:02:21.062Z  
 */
.cropper-container {  
  font-size: 0;  
  line-height: 0;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  direction: ltr;  
  -ms-touch-action: none;  
  touch-action: none
}  

.cropper-container img {  
  /* Avoid margin top issue (Occur only when margin-top <= -height) */  
  display: block;  
  min-width: 0 !important;  
  max-width: none !important;  
  min-height: 0 !important;  
  max-height: none !important;  
  width: 100%;  
  height: 100%;  
  image-orientation: 0deg  
}
.cropper-wrap-box,  
.cropper-canvas,  
.cropper-drag-box,  
.cropper-crop-box,  
.cropper-modal {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
}
.cropper-wrap-box {  
  overflow: hidden;  
}
.cropper-drag-box {  
  opacity: 0;  
  background-color: #fff;  
}
.cropper-modal {  
  opacity: .5;  
  background-color: #000;  
}
.cropper-view-box {  
  display: block;  
  overflow: hidden;
  width: 100%;  
  height: 100%;
  outline: 1px solid #39f;  
  outline-color: rgba(51, 153, 255, 0.75);  
}  

.cropper-dashed {  
  position: absolute;
  display: block;
  opacity: .5;  
  border: 0 dashed #eee  
}
.cropper-dashed.dashed-h {  
  top: 33.33333%;  
  left: 0;  
  width: 100%;  
  height: 33.33333%;  
  border-top-width: 1px;  
  border-bottom-width: 1px  
}
.cropper-dashed.dashed-v {  
  top: 0;  
  left: 33.33333%;  
  width: 33.33333%;  
  height: 100%;  
  border-right-width: 1px;  
  border-left-width: 1px  
}
.cropper-center {  
  position: absolute;  
  top: 50%;  
  left: 50%;
  display: block;
  width: 0;  
  height: 0;
  opacity: .75  
}
.cropper-center:before,  
  .cropper-center:after {  
  position: absolute;  
  display: block;  
  content: ' ';  
  background-color: #eee  
}
.cropper-center:before {  
  top: 0;  
  left: -3px;  
  width: 7px;  
  height: 1px  
}
.cropper-center:after {  
  top: -3px;  
  left: 0;  
  width: 1px;  
  height: 7px  
}
.cropper-face,  
.cropper-line,  
.cropper-point {  
  position: absolute;
  display: block;
  width: 100%;  
  height: 100%;
  opacity: .1;  
}
.cropper-face {  
  top: 0;  
  left: 0;
  background-color: #fff;  
}
.cropper-line {  
  background-color: #39f  
}
.cropper-line.line-e {  
  top: 0;  
  right: -3px;  
  width: 5px;  
  cursor: e-resize  
}
.cropper-line.line-n {  
  top: -3px;  
  left: 0;  
  height: 5px;  
  cursor: n-resize  
}
.cropper-line.line-w {  
  top: 0;  
  left: -3px;  
  width: 5px;  
  cursor: w-resize  
}
.cropper-line.line-s {  
  bottom: -3px;  
  left: 0;  
  height: 5px;  
  cursor: s-resize  
}
.cropper-point {  
  width: 5px;  
  height: 5px;  

  opacity: .75;  
  background-color: #39f  
}
.cropper-point.point-e {  
  top: 50%;  
  right: -3px;  
  margin-top: -3px;  
  cursor: e-resize  
}
.cropper-point.point-n {  
  top: -3px;  
  left: 50%;  
  margin-left: -3px;  
  cursor: n-resize  
}
.cropper-point.point-w {  
  top: 50%;  
  left: -3px;  
  margin-top: -3px;  
  cursor: w-resize  
}
.cropper-point.point-s {  
  bottom: -3px;  
  left: 50%;  
  margin-left: -3px;  
  cursor: s-resize  
}
.cropper-point.point-ne {  
  top: -3px;  
  right: -3px;  
  cursor: ne-resize  
}
.cropper-point.point-nw {  
  top: -3px;  
  left: -3px;  
  cursor: nw-resize  
}
.cropper-point.point-sw {  
  bottom: -3px;  
  left: -3px;  
  cursor: sw-resize  
}
.cropper-point.point-se {  
  right: -3px;  
  bottom: -3px;  
  width: 20px;  
  height: 20px;  
  cursor: se-resize;  
  opacity: 1  
}
@media (min-width: 768px) {
  .cropper-point.point-se {  
    width: 15px;  
    height: 15px  
  }  
}
@media (min-width: 992px) {
  .cropper-point.point-se {  
    width: 10px;  
    height: 10px  
  }  
}
@media (min-width: 1200px) {
  .cropper-point.point-se {  
    width: 5px;  
    height: 5px;  
    opacity: .75  
  }  
}
.cropper-point.point-se:before {  
  position: absolute;  
  right: -50%;  
  bottom: -50%;  
  display: block;  
  width: 200%;  
  height: 200%;  
  content: ' ';  
  opacity: 0;  
  background-color: #39f  
}
.cropper-invisible {  
  opacity: 0;  
}
.cropper-bg {  
  background-image: url('');  
}
.cropper-hide {  
  position: absolute;
  display: block;
  width: 0;  
  height: 0;  
}
.cropper-hidden {  
  display: none !important;  
}
.cropper-move {  
  cursor: move;  
}
.cropper-crop {  
  cursor: crosshair;  
}
.cropper-disabled .cropper-drag-box,  
.cropper-disabled .cropper-face,  
.cropper-disabled .cropper-line,  
.cropper-disabled .cropper-point {  
  cursor: not-allowed;  
}
</style>
